include(['com.unknown.Constants', 'com.unknown.Config'], 
function(){
	
	declare('com.unknown.Sidebar');
	com.unknown.Sidebar = {
		data               : [],
		navStack           : [],
		selected           : null,
		nodes              : null,
		start              : 0,
		
		expanded           : false,
		
		STYLES : {
			NORMAL : '_normal',
			RIGHT  : '_right',
			EXPANDED : '_exp',
			
			currentStyle : this.NORMAL,
					
			generate : function(element, component, expanded){
				this._generate(element, component, expanded, this.currentStyle);
			},
			_generate : function(element, component, expanded, cs){
				var style = this._generateClass(component, expanded, cs);
				element.addClass( style );
			},
			_generateClass : function(component, expanded, cs){
				var style = component + this.currentStyle + (expanded?'':this.EXPANDED);
				return style;
			},
			reset : function(element, component){
				element.removeClass( this._generateClass(component, false, this.RIGHT) );
				element.removeClass( this._generateClass(component, true, this.RIGHT) );
				element.removeClass( this._generateClass(component, false, this.NORMAL) );
				element.removeClass( this._generateClass(component, true, this.NORMAL) );
			}
		},
			
		initialize : function(data){
			this.data = data;
			this.navStack.push({node : data});
			this.nodes = data.nodes;
			this.selected = data;
					
			this.rebuildToolbar();
			
			addOrientationChangedListener(this.onOrientationChanged);
			
			$("#show-toolbar").click(function(){
				$("#menu").hide("slide", com.unknown.Constants.EMPTY, com.unknown.Config.FADE_SPEED, com.unknown.Sidebar.onToolsShow);
			});
		},
		onOrientationChanged : function(ori){
			com.unknown.Sidebar._onOrientationChanged(ori);
		},
		_onOrientationChanged : function(ori){
			this.resetStyle();
			if( ori == PORTRAIT ){
				this.STYLES.currentStyle = this.STYLES.NORMAL;
			}else{
				this.STYLES.currentStyle = this.STYLES.RIGHT;
			}
			this.rebuildStyles();
			this.rebuildToolbar();
		},
		rebuildStyles : function(){
			/*
			this.resetStyle();
			var expWidth = this.expanded ? 70 : 0;
			
			var newHeight = window.innerHeight;
			var newWidth = window.innerWidth - 60;
			
			$('#designer').width(newWidth - expWidth)
			$('#designer').height(newHeight);
			
			$('#designer-body').width(newWidth - expWidth);
			$('#designer-body').height(newHeight - 20);
			
			$('#toolbar-body').height(newHeight - 80);
			$('#toolbar').height(newHeight);
			
			$(canvasMask).offset({ left:(this.expanded ? 90 : 50), top: 30});
			$(touchMask).offset({ left:(this.expanded ? 50 : 15), top: 0});
			*/
		},	
		resetStyle : function(){
			
		},	
		setCurrentNode : function(node, parent){
			this.start = 0;
			this.navStack.push( {node:node, parent:parent} );
			this.selected = node;
			this.nodes = node.nodes;
		},
		updateNodes : function(node){
			$.each(this.nodes, function(index, value){
				if( value.name == node ){
					var currentNode = com.unknown.Sidebar.current;
					com.unknown.Sidebar.setCurrentNode(value, currentNode);
				}
			});
			this.rebuildToolbar();
		},
		popNodes : function(node){
			var previous;
			var closeout = this.navStack.length == 1;
			while( this.navStack.length > 0 ){
				previous = this.navStack.pop();
				if( node == previous.node.name ){
					break;
				}
			}
			if( this.navStack.length == 0 && closeout ){
				$("#toolbar").hide("slide", com.unknown.Constants.EMPTY, com.unknown.Config.FADE_SPEED, this.onToolsHide);
			}
			this.setCurrentNode(previous.node, previous.parent);
	
			this.rebuildToolbar();
		},
		onToolsHide : function(){
			com.unknown.Sidebar._onToolsHide();
		},
		_onToolsHide : function(){
			this.expanded = false;
			
			this.rebuildStyles();
			
			$("#menu").show("slide", com.unknown.Constants.EMPTY, com.unknown.Config.FADE_SPEED);
		},
		onToolsShow : function(){
			com.unknown.Sidebar._onToolsShow();
		},	
		_onToolsShow : function(){
			this.expanded = true;
			
			this.rebuildStyles();
			
			$("#toolbar").show("slide", com.unknown.Constants.EMPTY, com.unknown.Config.FADE_SPEED);
		},
		rebuildToolbar : function(){
			var list = {nodes: this.nodes, start: this.start, count: com.unknown.Config.VISIBLE_ITEM_COUNT};
			var last;
			if( this.navStack.length > 1 ){
				last = this.navStack[ this.navStack.length-2];
			}else{
				last = this.navStack[0];
			}
			$("#toolbar-close").empty();
			$("#breadcrumb").tmpl(last).appendTo("#toolbar-close");
			this.attachBreadcrumbHandler();
			
			$("#toolbar-list").empty();
			$("#toolbar-item").tmpl(list).appendTo( "#toolbar-list" );
			this.attachNavigationHandler();
			
			$('.draggable').draggable({
				helper     : 'clone'
				, appendTo : 'body'
				, cursor   : 'move'
			});
			if(_toolscroll)
				_toolscroll.refresh();
		},
		attachBreadcrumbHandler : function(){
			$("#toolbar-close > a").each(function() {
				$(this).click(function(){
					var menuId = $(this).attr('menuId');
					com.unknown.Sidebar.popNodes(menuId);
				});
			});
		},
		attachNavigationHandler : function(){
			$("#toolbar-list > a").each(function() {
				$(this).click(function(){
					var menuId = $(this).attr('menuId');
					com.unknown.Sidebar.updateNodes(menuId);	
				});
			});
			$(".toolbar-hex").each(function(){
				$(this).click(function(){
					var data;
					var i = $(this).attr('index');
					if( i >= 0 ){
						data = com.unknown.Sidebar.nodes[i];
					}else{
						data = {action:$(this).attr('name').toLowerCase()}
					}
					actionManager.initAction(data);
				});
			});
		},
		createEnvironmentItem : function(item, offset){
			var designer = $('#scroller');
			
			this.appendWithRelativePosition(item, designer, offset);
			
			item.addClass('actionable');
			this.attach();
		},
		appendWithRelativePosition : function(item, parent, coord){
			item.appendTo(parent);
			item.css({left:coord.left, top:coord.top, position:'absolute'});
			coord = item.offset();
			item.css({position:'relative'});
			item.offset({top: coord.top, left: coord.left});
		},
		attach : function(){
			$('.actionable', $('#designer')).click(function(){
				var left = $(this).offset().left;
				var top = $(this).offset().top;
				$('#dialog').dialog({
					position : [left, top],
					draggable: false,
					resizable: false					
				});
			});
			$('.actionable').removeClass('actionable');
		}
	};
});